<template>
  <inject-template :item="item">
    <template v-slot:common>
      <div ref="wbBg" class="wb-multi-bg" :style="styles"></div>
    </template>
  </inject-template>
</template>
<script>
import InjectTemplate from '@/components/inject-template.vue'
import { utils } from '@/components/utils/utils'
import { getPxOVwByValue } from '@/store/utils'

export default {
  name: "WbMultiBg",
  mixins: [utils],
  components: {
    InjectTemplate
  },
  setup () {
    return {
      movelist: [],
    };
  },
  mounted() {
    this.loadBgImgs();
  },
  methods: {
    loadBgImgs(){
      let loadAllNum = this.lists.length;
      let count = 0;
      _.forEach(this.lists, (item) => {
        let img = new Image();
        img.onload = () => {
          count++;
          if(count >= loadAllNum){
            this.init();
          }
        }
        img.src = item.url
      })
    },
    init() {
      let len = this.lists.length - 1;
      document.body.style.backgroundAttachment = "fixed";
      document.body.style.overflow = "hidden";
      _.forEach(this.lists, (item, index) => {
        let div = document.createElement("div");
        div.style.backgroundImage = "url(" + item.url + ")";
        if(item.width == "100%"){
          div.style.width = "inherit";
        }else{
          div.style.width = getPxOVwByValue(item.width);
        }
        div.style.height = getPxOVwByValue(item.height);
        div.style.left = getPxOVwByValue(item.x);
        div.style.top = getPxOVwByValue(item.y);
        div.style.zIndex = item.zIndex;
        this.$refs.wbBg.appendChild(div);

        if(index == len){
          div.id = "bg-top";
        }
        div.style.transform = "translateY(-" + getPxOVwByValue(item.y) + ")";
        this.movelist.push(div);
      })
      
      window.setTimeout( () => {
        let bgTop = document.getElementById("bg-top");
        this.addAnimate(bgTop.style);
        let movelist = this.movelist;
        window.setTimeout(() => {
          if(this.commonAttr.isLastHidden){
            bgTop.style.display = "none";
          }
          bgTop.style.transform = "translateY(0px)";
          this.resetAnimate(bgTop.style);
          for (let i = 0, len = movelist.length; i < len; i++) {
            this.addAnimate(movelist[i].style);
          }
          window.setTimeout( () => {
            document.body.style.overflowY = "auto";
            document.body.scrollTop = "0px";
            this.onScroll();
            for (let i = 0, len = movelist.length; i < len; i++) {
              movelist[i].style.transform = "translateY(0px)";
              this.resetAnimate(movelist[i].style);
            }
          }, this.commonAttr.animateTime*1000)

        }, 400);
      }, this.commonAttr.pauseTime*1000);

    },
    addAnimate(style){
      style.animation = "movedonghua " + this.commonAttr.animateTime + "s 1";
    },
    resetAnimate(style){
      style.animation = "";
    },
    onScroll() {
      if(this.isH5Edit){
        return
      }
      window.onscroll = () => {
        var top = document.body.scrollTop + document.documentElement.scrollTop;
        _.forEach(this.movelist, (div, index) => {
          let item = this.lists[index];
          div.style.top = getPxOVwByValue(top*2*-item.speed+item.y);
        })
      };
    }
  }
};
</script>
<style lang="scss">
.wb-multi-bg {
  width: inherit;
  height: inherit;

  div{
    position: fixed;
    background-size: contain;
  }

  @keyframes movedonghua {
    100%	{transform:translateY(0px)}
  }
}
</style>


